<template>
	<view class="timeline">
		<view v-if="timelineList && timelineList.length > 0" v-for="(item,index) in timelineList">
			<view class="timeline-item">
				<view class="left">
					<view>08:04</view>
					<view style="height: 350rpx;font-size: 22rpx;" v-if="index < timelineList.length-1">07-10</view>
					<view style="height: 250rpx;font-size: 22rpx;" v-if="index == timelineList.length-1">07-10</view>
				</view>
				<view class="middle">
					<view class="step-num" v-if="index==0">{{index+1}}</view>
					<view class="step-num" style="background-color: #3f85ff;" v-if="index > 0 && index < timelineList.length-1">{{index+1}}</view>
					<view class="step-num" style="background-color: #e99d42;" v-if="index == timelineList.length-1">{{index+1}}</view>
					<view class="step-line" v-if="index < timelineList.length-1"></view>
					<view class="step-line-no" v-if="index == timelineList.length-1"></view>
				</view>
				<view class="right">
					<view style="margin-bottom: 15rpx;">宿迁市·南蔡</view>
					<view class="pictures">
						<view class="pic-list" @click="lookImg2(idx)" v-for="(d, idx) in item.pictureList">
							<image style="width: 120rpx;height: 120rpx;" mode="scaleToFill" :src="d.filePath"></image>
							<text class="shoot_time">{{ d.shootTimeHm }}</text>
						</view>
					</view>
					<view class="content" v-if="index < timelineList.length-1">
						<view>
							<text>移动3分钟</text>
						</view>
						<view>
							<text style="font-size: 24rpx;color: #909399;">步行导航约101米，需1分钟</text>
						</view>
						<view>
							<text style="font-size: 24rpx;color: #909399;">驾车导航约97米，需12秒</text>
						</view>
					</view>
					<view style="border-bottom: 1px solid #e1e3e5;" v-if="index == timelineList.length-1">
					</view>
				</view>
			</view>
		</view>		
	</view>
</template>

<script>
	name:'MyTimeLine'
	export default {
		data() {
			return {
				timelineList:[
					{
						address:'宿迁市·南蔡',
						pictureList:[
							{filePath:'http://chat.mfarmers.com:88/uploads/江苏绿港/jpg/17521098192940_20250710_090859.jpg',shootTimeHm:'08:33'},
							{filePath:'http://chat.mfarmers.com:88/uploads/江苏绿港/jpg/17520395980630_20250709_133848.jpg',shootTimeHm:'07:10'}
						]
					},
					{
						address:'宿迁市·南蔡',
						pictureList:[
							{filePath:'http://chat.mfarmers.com:88/uploads/江苏绿港/jpg/17521098192940_20250710_090859.jpg',shootTimeHm:'08:33'},
							{filePath:'http://chat.mfarmers.com:88/uploads/江苏绿港/jpg/17520395980630_20250709_133848.jpg',shootTimeHm:'07:10'}
						]
					},
					{
						address:'宿迁市·南蔡',
						pictureList:[
							{filePath:'http://chat.mfarmers.com:88/uploads/江苏绿港/jpg/17521098192940_20250710_090859.jpg',shootTimeHm:'08:33'},
							{filePath:'http://chat.mfarmers.com:88/uploads/江苏绿港/jpg/17520395980630_20250709_133848.jpg',shootTimeHm:'07:10'}
						]
					}
				],
				imgList2:[],
			}
		},
		methods: {
			lookImg2(index) {
			  	// 预览图片
			  	uni.previewImage({
			  		current: index,
			  		urls: this.imgList2,
			  	});
			},
		}
	}
</script>

<style lang="scss" scoped>
.timeline {
	height: 100%;
	padding: 15px;
	font-size: 26rpx;
	.timeline-item {
		display: flex;
		flex-direction: row;
		.left {
			text-align: right;
		}
		.middle {
			display: flex;
			flex-direction: column; 
			justify-content: center;
			align-items: center;
			margin: 0 10rpx;
			.step-num {
				width: 40rpx;
				height: 40rpx; 
				border-radius: 50%;
				background-color: #0cc185;
				color: #fff;
				font-size: 22rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.step-line {
				height: 350rpx;
				border-right: 1px solid #909399;
			}
			.step-line-no {
				height: 250rpx;
			}
		}
		.right {
			width: 100%;
			.pictures {
				display: flex;
				flex-wrap: wrap;
				.pic-list {
					width: 25%;
					height: 0;
					padding-bottom: 25%; 
					box-sizing: border-box;
					position: relative;
					.shoot_time {
						position: absolute;
						bottom: 0;
						z-index: 999;
						display: flex;
						justify-content: center;
						width: 120rpx;
						color: #fff;
						padding-bottom: 25rpx;
					}
				}
			}
			.content {
				border-bottom: 1px solid #e1e3e5;
				border-top: 1px solid #e1e3e5;
				padding: 15rpx 0;
			}
		}
	}
}
</style>
